<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- <link type="text/css" rel="stylesheet" href="fs.css" /> -->


<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<link rel="stylesheet"
	href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://jqueryui.com/jquery-1.6.2.js"></script>
<script src="http://jqueryui.com/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.button.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script>
<!-- <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css"> -->


<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript">
	// 	$(document).ready(
	// 			function() {
	// 				var $dialog = $('<div></div>').html(
	// 						'This dialog will show every time!').dialog({
	// 					autoOpen : false,
	// 					title : 'Basic Dialog'
	// 				});

	// 				$('#opener').click(function() {
	// 					$dialog.dialog('open');
	// 					// prevent the default action, e.g., following a link
	// 					return false;
	// 				});

	// 				$('#circleJoinBtn').click(function() {
	// 					// a workaround for a flaw in the demo system http://dev.jqueryui.com/ticket/4375, ignore!
	// 					$("#dialog:ui-dialog").dialog("destroy");

	// 					$("#dialog-confirm").dialog({
	// 						resizable : false,
	// 						height : 140,
	// 						modal : true,
	// 						buttons : {
	// 							"Request" : function() {
	// 								$(this).dialog("close");
	// 							},
	// 							Cancel : function() {
	// 								$(this).dialog("close");
	// 							}
	// 						}
	// 					});
	// 				});
	// 			});

	$(document).ready(function() {
		$('#circleJoinBtn').click(function() {
			// a workaround for a flaw in the demo system http://dev.jqueryui.com/ticket/4375, ignore!
			$("#dialog:ui-dialog").dialog("destroy");

			$("#dialog-confirm").dialog({
				resizable : false,
				height : 140,
				modal : true,
				buttons : {
					"Request" : function() {
						$(this).dialog("close");
					},
					Cancel : function() {
						$(this).dialog("close");
					}
				}
			});
		});
	});
</script>

<style type="text/css">
.stats {
	margin: 10px;
	float: left;
}

.userTitleText {
	font-family: sans-serif;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: 700;
	line-height: 140%;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

h1 {
	font-size: 1.8em;
	line-height: 100%;
	/*margin-bottom: 20px;*/
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

.translate {
	font-family: sans-serif;
	font-size: 0.8em;
}

.userPlaceText {
	font-size: 0.8em;
}

#userDetails {
	float: left;
	margin: 10px;
	min-width: 240px;
}

#userPic {
	margin: 10px;
	float: left;
}

#userInfoManagebtn {
	width: 40px;
	position: relative;
	float: right;
	right: 0px;
}

.userTitleText {
	width: 100%;
}
</style>
</head>

<body style="display: block;">

	<!--  jquery popup  -->
	<div id="dialog-confirm" title="Do you want join the circle?"
		style="visibility: hidden;">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0; height: 100%;"></span>You
			are going to request joinning the circle to the Circle leader. After
			the leader confirms it, you will be a member of the circle.
		</p>
	</div>



	<div id="userInfo">
		<div id="userPic">
			<img src="images/seawolves.gif" width="64" height="64">
		</div>
		<div id="userDetails">
			<h1 class="userTitleText">Stony Brook Seawolves</h1>

			<!-- 			<p class="userPlaceText">Hauppauge, NY</p> -->


			<div id="userStats">
				<div class="stats">
					<h2>
						<a> <img src="images/icon_checkin.png" height="32" width="32"
							alt=""> 736
						</a>
					</h2>

					<span class="translate">Check-ins</span>
				</div>
				<div class="stats">
					<h2>
						<a href="place.jsp"> <img src="images/icon_calendar.png"
							height="32" width="32" alt=""> 12<span
							style="color: rgb(255, 64, 64)">+7</span>
						</a>
					</h2>
					<span class="translate">Places</span>
				</div>
				<div class="stats">
					<h2>
						<a href="circleMemberLists.jsp"> <img src="images/icon_tips.png"
							height="32" width="32" alt=""> 33<span
							style="color: rgb(255, 64, 64)">+2</span>
						</a>
					</h2>
					<span class="translate">Members</span>
				</div>
				<!--       <div class="stats statsLast"> -->
				<!--         <a href="http://twitter.com/djbigd75" rel="me" target="_blank"> -->
				<!--           <img src="https://static-s.foursquare.com/img/twitterIcon-fa3f490ee5c4d7933c21bf7ee39d531a.png"> -->
				<!--         </a> -->
				<!--         <a href="http://www.facebook.com/profile.php?id=1178974443" rel="me" target="_blank"> -->
				<!--           <img src="https://static-s.foursquare.com/img/facebookIcon-95d95784c474d2d4538d28404f6fc23f.png"> -->
				<!--         </a> -->
				<!--       </div> -->

			</div>
		</div>
		<!--  #userDetails ends -->

		<div style="text-align:center; margin-bottom:40px;">
			<form action="CircleEdit.jsp">
				<input type="submit" id="circleManageBtn"
					style="width: 440px; height:40px; margin-top: 10px; text-align: center; font-family: sans-serif;"
					value="Manage">
			</form>
			<button id="circleJoinBtn"
				style="width: 440px; height:40px; text-align: center; margin-top: 10px; font-family: sans-serif;">Join</button>
		</div>
	</div>
	<!-- #userInfo ends -->
</body>
</html>